<template>
	<view class="online-custom-tabs" :style="{marginBottom: (widget.props.paddingBottom ? widget.props.paddingBottom : 0) + 'px'}">
		<u-tabs 
			:is-scroll="false"
			:current="active"
			:list="widget.childWidgetList"
			:active-color="theme.primary_color"
			name="showName"
			:bold="false"
			@change="changeTab"
			:bar-style="{marginLeft: '18rpx'}"
		/>
		<view v-for="(subWidget, index) in widget.childWidgetList" 
			:key="subWidget.variableName">
			<online-custom-block v-if="active === index" :widgetList="subWidget.childWidgetList" />
		</view>
	</view>
</template>

<script>
	export default {
		name: 'onlineCustomTabs',
		props: {
			widget: {
				type: Object
			}
		},
		data() {
			return {
				active: 0
			}
		},
		computed: {

		},
		methods:{
			changeTab(index){
				this.active = index
			}
		},
		watch: {
			'widget.childWidgetList': {
				handler() {
					this.active = 0;
				},
				immediate: true
			}
		}
	}
</script>
<style>
	
</script>